<template>
  <AplidCharts type="bar" :option="options"></AplidCharts>
</template>

<script setup lang="ts">
import AplidCharts from "@/components/AplidCharts/index.vue";
import * as echarts from "echarts";

type Props = {
  dataX?:any,
  dataY?:any,
};
const props = withDefaults(defineProps<Props>(), {
  dataX: [],
  dataY: [],
});

  let options = {
    grid: {
      left: 60,
      top: 20,
      height: '80%'
    },
    tooltip: {
      trigger: "item",
      backgroundColor: '#040b15',
      borderColor: "#159AFF",
      padding: [5, 10],
      textStyle: {
        color: "rgba(255,255,255,0.8)",
      },
      // position: function (point, params, dom, rect, size) {
      //   // 固定在每一项右侧的下方
      //   // point 是鼠标的位置，params 是当前系列的数据，dom 是 tooltip 元素，rect 是坐标系位置，size 是 tooltip 尺寸
      //   // 可以根据需要微调偏移量
      //   return [rect.x -100 + rect.width, rect.y +20 + rect.height / 2];
      // },
      axisPointer: {
        lineStyle: {
          color: "transparent",
        },
      },
      formatter: function (params) {
        if(params.name=='待评估') {
          return params.name + "<span style='margin-left:20px'>9%</span>"
        } else if(params.name=='普通老人') {
          return params.name + "<span style='margin-left:20px'>52%</span>"
        } else if(params.name=='政府免费发放老人') {
          return params.name + "<span style='margin-left:20px'>39%</span>"
        }
      }
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: "category",
        data: props.dataX,
        axisLabel: {
          lineHeight: 36,
          margin: 2, //刻度标签与轴线之间的距离
          color: "#D8F0FF",
          fontSize: 12,
          fontWeight: 400,
          formatter: function (value) {
            if (value !== undefined) {
              if (value.length > 4) {
                // 超出5个字符显示省略号
                return `${value.slice(0, 4)}...`;
              }
              return value;
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      }
    ],
    series: [{
      type: 'bar',
      barWidth: 20,
      stack: 1,
      z: 1,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#1978E51A' // 0% 处的颜色
        }, {
          offset: 1,
          color: '#1978E5FF' // 100% 处的颜色
        }], false)
      },
      label: {
        normal: {
          show: true,//开启显示
          position: 'left',//柱形上方
          textStyle: { //数值样式
            color: '#fff'
          },
          offset: [40, -17]
        }
      },
      data: props.dataY,
    },
    { //分隔
      type: 'pictorialBar',
      itemStyle: {
        color: '#000'
      },
      symbolRepeat: 'fixed',
      symbolMargin: 4,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [2, 20],
      symbolPosition: 'start',
      symbolOffset: [0, 0],
      data: props.dataY,
      z: 2,
      animationEasing: 'elasticOut'
    }
    ]
  };
</script>
<style scoped lang="scss"></style>
